document.addEventListener('DOMContentLoaded', function() {
  // 初始加载数据
  fetchData();
  
  // 添加刷新按钮点击事件
  const refreshButton = document.getElementById('refresh');
  if (refreshButton) {
    refreshButton.addEventListener('click', function() {
      // 获取刷新图标元素
      const svgElement = refreshButton.querySelector('svg');
      if (svgElement) {
        // 添加旋转动画类
        svgElement.classList.add('rotating');
      }
      
      // 获取新数据并处理动画
      fetchData().then(() => {
        // 动画结束后移除旋转类名
        setTimeout(() => {
          const svgElement = refreshButton.querySelector('svg');
          if (svgElement) {
            svgElement.classList.remove('rotating');
          }
        }, 800); // 动画持续800毫秒
      });
    });
  }
});

/**
 * 获取视频数据的函数
 * @returns {Promise} 返回一个Promise对象
 */
function fetchData() {
  return new Promise((resolve) => {
    // 查询当前活动标签页
    chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
      // 检查是否找到活动标签页
      if (!tabs || !tabs[0]) {
        console.error('未找到活动标签页');
        resolve();
        return;
      }
      
      // 向内容脚本发送消息获取数据
      chrome.tabs.sendMessage(tabs[0].id, {action: 'getStats'}, function(response) {
        // 检查是否有运行时错误
        if (chrome.runtime.lastError) {
          console.error('Chrome运行时错误:', chrome.runtime.lastError);
          resolve();
          return;
        }
        
        // 如果收到响应，更新界面
        if (response) {
          updateUI(response);
        }
        resolve();
      });
    });
  });
}

/**
 * 更新界面显示的函数
 * @param {Object} stats - 包含视频数据的对象
 */
function updateUI(stats) {
  // 定义需要更新的数据容器ID
  const containers = ['title', 'likes', 'coins', 'favorites', 'shares'];
  
  // 遍历每个容器进行更新
  containers.forEach(key => {
    const container = document.getElementById(`${key}-container`);
    if (!container) {
      console.error(`未找到容器: ${key}-container`);
      return;
    }
    
    // 获取值和错误显示元素
    const valueSpan = container.querySelector('.value');
    const errorSpan = container.querySelector('.error');
    
    if (!valueSpan || !errorSpan) {
      console.error(`容器中未找到必需的span元素: ${key}-container`);
      return;
    }
    
    try {
      // 如果有错误，显示错误信息
      if (stats[key].error) {
        valueSpan.textContent = '';
        errorSpan.innerHTML = `
          <div class="error-details">
            <div>错误信息：${stats[key].error.message}</div>
            <div>选择器：${stats[key].error.selector}</div>
            <div>错误类型：${stats[key].error.type}</div>
          </div>
        `;
      } else {
        // 否则显示数据值
        valueSpan.textContent = stats[key].value;
        errorSpan.textContent = '';
      }
    } catch (error) {
      console.error(`更新 ${key} 的UI时发生错误:`, error);
    }
  });
} 